<script setup lang="ts">
const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  }
})
</script>

<template>
<div class="w-[100%] h-[100%] flex justify-between relative z-[3]">
  <img class="w-[25px] h-[72px] mr-[19px]" src="@/assets/img/rt/18.png">
  <div class="flex flex-1 justify-between">
    <div class="w-[164px] h-[72px] flex flex-col items-center justify-center bg1">
      <div class="text-[24px] text-[#FB2D19] ff-YouSheBiaoTiHei mt-[-5px]">{{ data?.heart?.average_heart_rate || 0 }}<span class="text-[14px] text-[#808080]">bpm</span></div>
      <div class="text-[14px] text-[#1A1A1A] font-medium mt-[-5px]">平均心率</div>
    </div>
    <div class="w-[164px] h-[72px] flex flex-col items-center justify-center bg1">
      <div class="text-[24px] text-[#FB2D19] ff-YouSheBiaoTiHei mt-[-5px]">{{ data?.heart?.spo?.value || 0 }}<span class="text-[14px] text-[#808080]">%</span></div>
      <div class="text-[14px] text-[#1A1A1A] font-medium mt-[-5px]">血氧饱和度</div>
    </div>
    <div class="w-[164px] h-[72px] flex flex-col items-center justify-center bg1">
      <div class="text-[24px] text-[#FB2D19] ff-YouSheBiaoTiHei mt-[-5px]">{{ data?.factor_interpretation?.f2 || 0 }}</div>
      <div class="text-[14px] text-[#1A1A1A] font-medium mt-[-5px]">湿气指数</div>
    </div>
    <div class="w-[164px] h-[72px] flex flex-col items-center justify-center bg1">
      <div class="text-[24px] text-[#FB2D19] ff-YouSheBiaoTiHei mt-[-5px]">{{ data?.factor_interpretation?.f3 || 0 }}</div>
      <div class="text-[14px] text-[#1A1A1A] font-medium mt-[-5px]">血淤指数</div>
    </div>
  </div>
  <img class="w-[25px] h-[72px] ml-[19px]" src="@/assets/img/rt/20.png">
</div>
</template>

<style scoped lang="scss">
.bg1{
  background: url("@/assets/img/rt/19.png") 0 0/100% 100% no-repeat;
}
</style>
